import React, {FC, ButtonHTMLAttributes, AnchorHTMLAttributes} from "react";
import classNames from "classnames";

export type ButtonSize = "large" | "small";
export type ButtonType = "primary" | "default" | "danger" | "link";

interface BaseButtonProps {
  children: React.ReactNode,
  size?: ButtonSize,
  btnType?: ButtonType,
  className?: string,
  disabled?: boolean,
  href?: string,
}

type NativeButtonProps = BaseButtonProps & ButtonHTMLAttributes<HTMLElement>
type AnchorButtonProps = BaseButtonProps & AnchorHTMLAttributes<HTMLElement>
export type ButtonProps = Partial<NativeButtonProps & AnchorButtonProps>

const Button: FC<ButtonProps> = (props) => {
  const {
    children,
    size,
    btnType,
    className,
    disabled,
    href,
    ...restProps
  } = props;

  const classes = classNames('btn', className, {
    [`btn-${btnType}`]: btnType,
    [`btn-${size}`]: size,
    'disabled': (btnType === 'link') && disabled
  })

  if (btnType === 'link' && href) {
    return (
      <a className={classes} href={href} {...restProps}>{children}</a>
    )
  } else {
    return (
      <button className={classes} disabled={disabled} {...restProps}>{children}</button>
    )
  }
}

Button.defaultProps = {
  disabled: false
}

export default Button;
